<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .outer {
            width: 300px;
            height: 300px;
            background: red;
        }
        
        .center {
            width: 200px;
            height: 200px;
            background: blue;
        }
        
        .inner {
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="center">
            <div class="inner"></div>
        </div>
    </div>
    <script>
        var outerEle = document.querySelector(".outer");
        var centerEle = document.querySelector(".center");
        var innerEle = document.querySelector(".inner");
        // 事件冒泡机制 ，从内向外依次触发事件执行；
        // 冒泡和捕获 通过 addEventListener 的第三个参数控制的：默认值是false（冒泡） true（捕获）
        /* window.addEventListener("click", function() {
                            console.log("window");
                        });
                        document.addEventListener("click", function() {
                            console.log("document");
                        });
                        document.documentElement.addEventListener("click", function() {
                            console.log("html");
                        });
                        document.body.addEventListener("click", function() {
                            console.log("body");
                        });
                        outerEle.addEventListener("click", function() {
                            console.log("outer");
                        });
                        centerEle.addEventListener("click", function() {
                            console.log("center");
                        });
                        innerEle.addEventListener("click", function(e) {
                            console.log("inner");
                        }); */
        // 事件捕获
        /*  window.addEventListener(
                        "click",
                        function() {
                            console.log("window");
                        },
                        true
                    ); */
        /* document.addEventListener(
                      "click",
                      function() {
                          console.log("document");
                      },
                      true
                  ); */
        /*  document.documentElement.addEventListener(
                    "click",
                    function() {
                        console.log("html");
                    },
                    true
                ); */
        /*  document.body.addEventListener(
                  "click",
                  function() {
                      console.log("body");
                  },
                  true
              ); */
        /* outerEle.addEventListener(
                "click",
                function() {
                    console.log("outer");
                },
                true
            ); */
        /*  centerEle.addEventListener(
              "click",
              function() {
                  console.log("center");
              },
              true
          ); */
        innerEle.addEventListener(
            "click",
            function(e) {
                // 触发的目标元素
                console.log(e.target);
                console.log("inner");
            },
            true
        );
    </script>
</body>

</html>